<template>
	<view class="container">
		<uni-nav-bar title="分账流水" background-color="#fff" fixed statusBar :border="false" height="88rpx" left-icon="left"
			@clickLeft="onClickLeft"></uni-nav-bar>
		<swiper style="height: 200rpx;" :indicator-dots="true" :previous-margin="'170rpx'" :next-margin="'170rpx'" :autoplay="true"
			:interval="3000" indicator-active-color="#f7f7f7" circular>
			<swiper-item>
				<view class="swiper-item bg1">
					<view class="title">今日销售</view>
					<view class="bottom">
						<view class="left">
							<view class="sub_title">销售额</view>
							<view class="number">
								￥{{ orderObj.todayOrderAmount }}
							</view>
						</view>
						<view class="right">
							<view class="sub_title">利润</view>
							<view class="number">
								￥{{ orderObj.todayProfitAmount }}
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item bg2">
					<view class="title">昨日销售</view>
					<view class="bottom">
						<view class="left">
							<view class="sub_title">销售额</view>
							<view class="number">
								￥{{ orderObj.yesterdayOrderAmount }}
							</view>
						</view>
						<view class="right">
							<view class="sub_title">利润</view>
							<view class="number">
								￥{{ orderObj.yesterdayProfitAmount }}
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item bg3">
					<view class="title">上月销售</view>
					<view class="bottom">
						<view class="left">
							<view class="sub_title">销售额</view>
							<view class="number">
								￥{{ orderObj.monthOrderAmount }}
							</view>
						</view>
						<view class="right">
							<view class="sub_title">利润</view>
							<view class="number">
								￥{{ orderObj.monthProfitAmount }}
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="section">
			订单分账金额统计
		</view>
		<view class="topTag">
			<view class="stateBox">
				<view>日期：</view>
				<uni-datetime-picker v-model="time" type="daterange" @change="maskClick" start-placeholder="开始" end-placeholder="结束" />
			</view>
		</view>
		<view class="table">
			<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据" style="overflow: scroll;box-sizing: border-box;"
				:style="{paddingBottom:(safeAreaBottom + 30) + 'px',height: `calc(100vh - 438rpx - ${statusBarHeight}px)`}">
				<uni-tr>
					<uni-th width="50" align="center">序号</uni-th>
					<uni-th align="center">订单金额（元）</uni-th>
					<uni-th align="center">整单优惠金额（元）</uni-th>
					<uni-th align="center">标品（元）</uni-th>
					<uni-th align="center">自营（元）</uni-th>
					<uni-th align="center">非标（元）</uni-th>
					<uni-th align="center">临时（元）</uni-th>
					<uni-th align="center">门店分润（元）</uni-th>
					<uni-th align="center">供应链分润（元）</uni-th>
					<uni-th align="center">手续费（元）</uni-th>
					<uni-th width="150" align="center">分账状态</uni-th>
					<uni-th align="center">订单编号</uni-th>
					<uni-th width="150" align="center">分账时间</uni-th>
					<uni-th width="150" align="center">更新时间</uni-th>
					<uni-th width="80" align="center">操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center">{{ index + 1 }}</uni-td>
					<uni-td align="center">{{ item.orderAmount }}</uni-td>
					<uni-td align="center">{{ item.discountMoney }}</uni-td>
					<uni-td align="center">{{ item.staAmount }}</uni-td>
					<uni-td align="center">{{ item.selAmount }}</uni-td>
					<uni-td align="center">{{ item.nonAmount }}</uni-td>
					<uni-td align="center">{{ item.temAmount }}</uni-td>
					<uni-td align="center">{{ item.storeProfit }}</uni-td>
					<uni-td align="center">{{ item.erpProfit }}</uni-td>
					<uni-td align="center">{{ item.fee }}</uni-td>
					<uni-td align="center">{{ item.status == '0' ? '成功':'失败' }}</uni-td>
					<uni-td align="center">{{ item.orderNum }}</uni-td>
					<uni-td align="center">{{ item.createTime | parseTime }}</uni-td>
					<uni-td align="center">{{ item.updateTime | parseTime }}</uni-td>
					<uni-td>
						<view class="uni-group">
							<button class="uni-button" size="mini" type="primary" @click="()=>{$navTo('./billFlowDetail',{id:item.id})}">详情</button>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<view class="bottomFix" :style="{paddingBottom:safeAreaBottom + 'px'}">
			<view class="uni-pagination-box"><uni-pagination show-icon :page-size="page.pageSize" :current="page.pageNum" :total="page.total"
					@change="change" />
			</view>
		</view>
	</view>
</template>

<script>
	import { reqDivideList, reqSaleCount } from '@/apis/goods.js'
	export default {
		name: "BillFlow",
		data() {
			return {
				time: [],
				searchVal: '',
				tableData: [],
				page: {
					pageNum: 1,
					pageSize: 15,
					total: 0,
				},
				loading: false,
				orderObj: {}
			}
		},
		onLoad() {
			this.getSaleCount();
			this.getDivideList();
		},
		methods: {
			async getSaleCount() {
				let res = await reqSaleCount();
				if (res.code === 200) {
					this.orderObj = res.data;
				}
			},
			async getDivideList() {
				this.loading = true;
				let startTime = this.time[0] || '';
				let endTime = this.time[1] || '';
				let { pageNum, pageSize } = this.page;
				let reqObj = { pageNum, pageSize, endTime, startTime }
				let res = await reqDivideList(reqObj);
				if (res.code === 200) {
					this.tableData = res.data.divideList.list;
					this.page.total = res.data.divideList.total;
					this.loading = false;
				}
			},
			maskClick(e) {
				this.time = e;
				this.page = {
					pageNum: 1,
					pageSize: 15
				}
				this.getDivideList();
			},
			// 分页触发
			change(e) {
				this.page.pageNum = e.current;
				this.getDivideList();
			},
		},
	}
</script>

<style>
	page {
		background: #f7f7f7;
	}
</style>

<style lang="scss" scoped>
	.swiper-item {
		padding: 20rpx;
		height: 200rpx;
		box-sizing: border-box;
		margin: 0 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background-size: 100% 100%;
		color: #fff;

		&.bg1 {
			background-image: url('/static/finance/bg_1.png');
		}

		&.bg2 {
			background-image: url('/static/finance/bg_2.png');
		}

		&.bg3 {
			background-image: url('/static/finance/bg_3.png');
		}

		.title {
			font-size: $uni-font-size-unBase;
		}

		.bottom {
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx;
			box-sizing: border-box;

			.left,
			.right {
				font-size: $uni-font-size-mini;

				.sub_title {
					margin-bottom: 10rpx;
				}
			}
		}
	}

	.section {
		background-color: #fff;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 10rpx;
		color: #2979ff;
		box-sizing: border-box;
	}

	.topTag {
		height: 100rpx;
		display: flex;
		justify-content: start;
		align-items: center;
		border-bottom: 1px solid #eee;
		background-color: #fff;
		box-sizing: border-box;

		.stateBox {
			display: flex;
			align-items: center;
			width: 80%;
			padding: 0 10rpx;
		}
	}

	/* 固定表头 */
	.uni-table-tr {
		&:first-child {
			position: sticky;
			top: 0;
			z-index: 20;
			background-color: #fff;
		}
	}

	/* 操作列固定 */
	.uni-table-tr .uni-table-th:last-child,
	.uni-table-tr .uni-table-td:last-child {
		position: sticky;
		right: 0;
		background-color: #fff;
		box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1);
		/* 阴影的偏移、模糊距离和颜色 */
		z-index: 1;
	}
	.uni-table-tr:nth-child(2n+1) .uni-table-td:last-child {
		background-color: #fafafa;
	}
	.uni-table-th,
	.uni-table-td {
		padding: 16rpx 10rpx;
	}

	.uni-table-td {
		line-height: 20rpx;
	}

	.uni-table-scroll {
		box-sizing: border-box;
	}

	.uni-group {
		display: flex;
		align-items: center;
	}

	.bottomFix {
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: $uni-font-size-base;
		z-index: 2;

		.uni-pagination-box {
			flex: 1;
			background-color: #f7f7f7;
		}
	}
</style>